<template>
    <div id="box">
        <div id="header">
            <input type="text" v-model="comment" placeholder="请输入评论内容">
            <button @click="sent">发布评论</button>
        </div>
        <ul>
            <li v-for="(comment, index) in comments" :key="index">
                {{ comment }}
                <button @click="del(index)">删除</button>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    data() {
        return {
            comment: '',
            comments: []
        };
    },
    methods: {
        sent() {
            if (this.comment.trim()) {
                
                this.comments.push(this.comment);
                this.comment = '';
            }
        },
        del(index) {
            
            this.comments.splice(index, 1);
        }
    }
};
</script>

<style lang="scss" scoped>
*{
    padding: 0;
    margin: 0;
    list-style-type: none;
}
</style>